<!--
*@Author: QWP
*@Description: 响应事件
*@Date: 2024-07-23 13:06:12
-->
<template>
  <u-card title="响应事件">
    <div style="position: absolute; z-index: 10; top: 12px; right: 12px;">
      <a-space>
        <div style="width: 32px;
          height: 32px;
          background: #D9D9D9;
          border-radius: 4px 4px 4px 4px; text-align: center; line-height: 32px; color: #fff">
          <LeftOutlined />
        </div>
        <div style="width: 32px;
          height: 32px;
          background: #D9D9D9;
          border-radius: 4px 4px 4px 4px; text-align: center; line-height: 32px; color: #fff">
          <RightOutlined />
        </div>
      </a-space>
    </div>
    <a-row :gutter="8">
      <a-col :span="8" align="middle">
        <a-image :src="urlFile('login/loginBg1.png')"
          height="97%"
          :preview="false"
          style="border-radius: 8px;">
        </a-image>
      </a-col>
      <a-col>
        <a-row style="color: red; font-size: 20px;"
          class="f-margin-b8">7·17自贡百货大楼火灾事故</a-row>
        <ul class="u-response-event-list">
          <li>开始时间: 2024年7月17日</li>
          <li>发生地点: 四川省自贡市高新区九鼎购物广场</li>
          <li>发生地点: 104.7774,29.3397</li>
        </ul>
      </a-col>
    </a-row>
    <u-table :columns="columns"
      :data="tabData"
      :scroll="{ y: 180 }">
    </u-table>
  </u-card>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted } from 'vue' 

import { useRoute, useRouter } from 'vue-router'
import { urlFile } from '@/util/common'

onMounted(() => {
  for(let i = 1; i < 10; i++) {
    tabData.push({
      a: `队伍名称${i}`,
      b: `${Math.floor(Math.random() * 50) + 1}人`,
      c: `队长名${i}`,
      d: `${Date.now().toString().substring(0, 11-(i.toString().length))}${i}`
    })
  }
})

let tabData = reactive<any[]>([]);
const columns = reactive<ColumnProps[]>([
  { title: '队伍名称', dataIndex: 'a', minWidth: 100 },
  { title: '队伍人数', dataIndex: 'b', minWidth: 100 },
  { title: '主要负责人', dataIndex: 'c', minWidth: 100 },
  { title: '联系电话', dataIndex: 'd', minWidth: 100 },
])

</script>

<style lang='scss'>
.u-response-event-list {
  li {
    position: relative;
    list-style: none;
    padding-left: 20px;
    margin-bottom: 8px;
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: yellowgreen;
    }
  }
}
</style>